<template>
  <detail-drawer
    v-model:visible="detailVisible"
    :data="detailData"
    :title="t('aiot.comment.commentDetail')"
    :get-container="getContainer"
  >
    <template #evaluateUserName>
      <div class="inline-flex items-center">
        <img
          src="../assets/customer-logo.png"
          class="rounded-full mr-2 hidden xxs:inline-block"
          style="width: 32px; height: 32px"
        />
        <span>{{ commentDetail.evaluateUserName }}</span>
      </div>
    </template>
    <template #serveQa>
      <div class="text-color-active mb-3.5">
        <Icon :type="getSatisfiedIcon(commentDetail.serviceSatisfaction)" class="text-2xl !align-middle mr-1" />
        <span class="align-middle">{{ t("baseData.satisfaction." + commentDetail.serviceSatisfaction) }}</span>
      </div>
      <div v-if="commentDetail.serviceQualityNames">
        <a-tag v-for="el in commentDetail.serviceQualityNames" :key="el" color="blue">{{ el }}</a-tag>
      </div>
    </template>
    <template #serveRate>
      <a-rate v-model:value="commentDetail.serviceScore" :disabled="true" class="!text-color-warn" />
      {{ t("aiot.comment.score", { rate: commentDetail.serviceScore }) }}
    </template>
  </detail-drawer>
</template>
<script setup lang="ts">
import { ref, watch } from "vue";
import type { DetailItem } from "/@/types/components";
import { useI18n } from "/@/locales/useI18n";
import { getCommentDetail } from "/@/api/aiot/commentManage";
import { CommentDetail } from "/@/api/aiot/commentManage/models";

const props = withDefaults(
  defineProps<{
    serviceOrderId: string | null;
    getContainer?: string;
  }>(),
  {
    getContainer: "#home-content",
  }
);
const emits = defineEmits(["update:serviceOrderId"]);
const commentDetail = ref<Partial<CommentDetail>>({});
watch(
  () => props.serviceOrderId,
  async (v) => {
    if (!v) return;
    emits("update:serviceOrderId", null);
    const data = await getCommentDetail(v);
    if (data) {
      commentDetail.value = data;
      detailVisible.value = true;
      detailData.value = [
        {
          label: t("aiot.comment.commentUser"),
          slotName: "evaluateUserName",
        },
        {
          label: t("aiot.comment.commentTime"),
          value: data.evaluateTime,
        },
        {
          label: t("aiot.comment.serveQa"),
          slotName: "serveQa",
        },
        {
          label: t("aiot.comment.serveRate"),
          slotName: "serveRate",
        },
        {
          label: t("aiot.comment.serveComment"),
          value: data.serviceEvaluation,
        },
      ];
    }
  }
);

const { t } = useI18n();
const detailVisible = ref(false);
const detailData = ref<DetailItem[]>([]);
function getSatisfiedIcon(satisfaction) {
  switch (satisfaction) {
    case "SUPER":
      return "icon-chaomanyi1";
    case "DISSATISFIED":
      return "icon-bumanyi1";
  }
  return "icon-yibanban1";
}
</script>
